<template>
	<view class="tabs" :class="{'button-box': type=='button', 'card-box': type=='card', 'line-box': type=='line'}">
		<view class="tab-item" :class="{active: index==current}" v-for='(item, index) in tabs' :key="index"
			@click="changeCurrent(index)">
			{{item}}
		</view>
	</view>
</template>

<script>
	import ComponentMixin from "../../mixins/common-component-mixin.js";
	export default {
		mixins: [ComponentMixin],
		props: {
			tabs: {
				type: Array,
				default: () => []
			},
			current: {
				type: Number,
				default: 0
			},
			type: {
				type: String,
				default: 'button',
				validator(value) {
					// 这个值必须与下列字符串中的其中一个相匹配
					return ['button', 'card', 'line'].includes(value)
				}
			}
		},

		methods: {
			changeCurrent(current) {
				this.$emit("change", {
					detail: {
						current
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.button-box {
		.tab-item {
			flex: 1;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
			background: #fff;
			color: #333;
			font-weight: 500;
		}

		.active {
			background: $theme-color;
			color: #fff;
			font-weight: 700;
		}
	}

	.card-box {
		.tab-item {
			flex: 1;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 16rpx;
			background: #fff;
			color: #333;
			font-weight: 500;
		}

		.active {
			background: $theme-color;
			color: #fff;
			font-weight: 700;
		}
	}

	.line-box {
		.tab-item {
			flex: 1;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			background: #fff;
			color: #333;
			font-weight: 500;
			border-bottom: 4rpx solid #fff;
		}

		.active {
			background: #fff;
			color: $theme-color;
			font-weight: 700;
			border-bottom-color: $theme-color;
		}
	}
</style>